<template>
    <Teleport to="#after-navigation" v-if="targetExists">
        <ForumManager />
    </Teleport>

    <div>
        <h2>{{ $t('mod.announcement.discuss.tit') }}</h2>
        <h3 class="discuss-name">{{ siteInfo?.title }}</h3>
        <div class="forum-post-box">
            <div class="post-header">
                <div class="user-picture pic">
                    <!-- <img src="" /> -->
                    <el-icon size="20" color="#F16C2E"><DataAnalysis /></el-icon>
                </div>
                <div class="user-info">
                    <div class="fullname over-1">{{ siteInfo?.title }}</div>
                    <!-- 由 <router-link to="/console/user">Long Hin Oscar Lai</router-link>  -->
                    <div class="date over-1" v-if="siteInfo">{{ $t('mod.announcement.discuss.table_label_1') }}{{ formatLoginTime(siteInfo?.created_at) }}</div>
                </div>
            </div>
            <div class="post-body rich-box" v-html="siteInfo?.description"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import ForumManager from '@/components/ForumManager.vue'

import type { SiteInfo } from '@/types/siteInfo'
import SiteInfoService from '@/api/siteInfo'

import { formatLoginTime } from '@/utils/global'

const route = useRoute()
const announcementDiscussId = computed(() => Number(route.params.announcementDiscussId))
const loading = ref(false)
const targetExists = ref(false)

const siteInfo = ref<SiteInfo>()
function getFaqIfo() {
    loading.value = true
    SiteInfoService.info(announcementDiscussId.value)
        .then(res => {
            siteInfo.value = res
        })
        .finally(() => {
            loading.value = false
        })
}

onMounted(() => {
    getFaqIfo()
    targetExists.value = !!document.querySelector('#after-navigation')
})
</script>

<style lang="less" scoped>
h2 {
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}

h3 {
    margin-bottom: 18px;
    font-size: 26px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}

.forum-post-box {
    margin-top: 8px;
    border-radius: 3px;
    border: 1px solid #0000001a;

    .post-header {
        padding: 8px 15px;
        background-color: #f9f9f9;

        display: flex;
        align-items: center;
        gap: 8px;

        .user-picture {
            border-radius: 50%;
            width: 45px;
            height: 45px;
            background-color: #e6e5e5;

            display: flex;
            align-items: center;
            justify-content: center;
        }

        .user-info {
            flex-grow: 1;

            .fullname {
                margin-bottom: 4px;
            }
        }
    }

    .post-body {
        padding: 15px;
    }
}
</style>
